<template>
  <div class="page">
    <!-- 头部用户信息区域（仅登录时显示） -->
    <div 
      v-if="isLoggedIn"
      class="top" 
      @click="() => router.push('/settingscenter')" 
    >
      <div class="top-box">
        <img class="box-img" :src="userInfo.avatar || 'src/assets/man.png'" />
        <div class="box-text">
          <span class="box-text-name">{{ userInfo.username || '当前未登录' }}</span>
          <div class="box-bot">
            <span class="box-bot-text">邮箱号: {{ userInfo.email || '未设置' }}</span>
          </div>
          <div class="user-role">角色：{{ formatRole(userInfo.id) }}</div>
        </div>
      </div>
    </div>

    <!-- 功能内容区域（仅登录时显示） -->
    <div v-if="isLoggedIn" class="content">
      <!-- 网格图标区域 -->
      <van-grid :columns="4" :border="false">
        <van-grid-item 
          v-for="(tab, index) in tabsList" 
          :key="index" 
          :icon="tab.icon" 
          :text="tab.title"
          @click="tab.onClick ? tab.onClick() : null"
        >
        </van-grid-item>
      </van-grid>
      
      <!-- 列表项区域 -->
      <van-cell 
        v-for="(item, index) in caseList.flat()" 
        :key="index" 
        :title="item.title"
        :label="item.description" 
        :icon="item.icon" 
        is-link 
        @click="item.onClick" 
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showDialog } from 'vant'; // 引入弹窗组件
import { UserControllerService } from '../../api/services/UserControllerService';

// 登录状态管理
const isLoggedIn = ref(false);
const router = useRouter();

// 用户信息数据
const userInfo = ref({
  id: null,
  email: null,
  avatar: null,
  createTime: null,
  username: null
});

// 顶部网格图标配置
const tabsList = ref([
  {
    icon: 'src/assets/Personal/a1.png',
    title: '我的订单',
    key: 'like',
    onClick: () => router.push({ name: 'Order' })
  },
  {
    icon: 'src/assets/Personal/a2.png',
    title: '会员中心',
    key: 'favorite',
    onClick: () => router.push({ name: 'MemberCenter' })
  },
  {
    icon: 'calendar-o',
    title: '我的预约',
    key: 'order',
    onClick: () => router.push({ name: 'MyOrder' })
  },
  {
    icon: 'src/assets/Personal/a4.png',
    title: '加入我们',
    key: 'publish',
    onClick: () => router.push({ name: 'DriverRegistration' })
  }
]);

// 底部列表项配置
const caseList = ref([
  [
    {
      icon: 'service-o',
      title: '在线客服',
      description: '随时联系我们的客服人员'
    },
    {
      icon: 'question-o',
      title: '帮助反馈',
      description: '提交你的问题和建议'
    },
    {
      icon: 'setting-o',
      title: '设置中心',
      description: '个性化你的设置',
      onClick: () => router.push({ name: 'UserSettings' })
    }
  ]
]);

// 角色格式化方法
const formatRole = (id) => {
  return id === 1 ? '管理员' : '普通用户';
};

// 显示自定义提示弹窗（只包含确认按钮）
const showCustomDialog = (message, title = '提示') => {
  return showDialog({
    title,
    message,
    confirmButtonText: '确认',
    showCancelButton: false // 只显示确认按钮
  });
};

// 页面挂载时执行登录检查
onMounted(async () => {
  try {
    // 检查本地存储中的token
    const token = localStorage.getItem('token');
    if (!token) {
      // 未登录时显示弹窗
      await showCustomDialog('请先登录以访问个人中心', '登录提示');
      router.push('/login'); // 直接跳转到登录页
      return;
    }
    
    // 验证token并获取用户信息
    const res = await UserControllerService.getIdByToken(token);
    userInfo.value.id = res.data;
    await getUserInfo();
    isLoggedIn.value = true;
    
  } catch (error) {
    console.error('登录状态检查失败:', error);
    // 错误时显示提示弹窗
    await showCustomDialog('登录状态验证失败，请重新登录');
    router.push('/'); // 返回主页
  }
});

// 获取用户详细信息
const getUserInfo = async () => {
  try {
    if (!userInfo.value.id) return;
    const res = await UserControllerService.getUserById(userInfo.value.id);
    userInfo.value = res.data;
  } catch (error) {
    console.error('获取用户信息失败:', error);
    await showCustomDialog('获取用户信息失败，请稍后再试');
  }
};
</script>

<style lang="scss" scoped>
/* 页面整体样式 */
.page {
  padding-bottom: 50px;
}

/* 头部用户信息区域样式 */
.top {
  padding: 20px;
  background: var(--gradient-primary);
  color: white;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.top-box {
  display: flex;
  align-items: center;
  column-gap: 30px;
}

.box-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid white;
}

.box-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
}

.box-text-name {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
}

.box-bot {
  display: flex;
  align-items: center;
  margin: 5px 0;
}

.box-bot-text {
  font-size: 14px;
  margin-right: 15px;
  opacity: 0.9;
}

.user-role {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 3px;
}

/* 内容区域样式 */
.content {
  margin-top: 20px;
  padding: 0 20px;
}

/* 加载状态样式（备用） */
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}
</style>